<template>
  <div class="index">
    <PageHeader header-title="意见建议说一说"></PageHeader>
    <div class="banner-content">
      <img src="../../static/images/opinions/banner.png" mode="widthFix" />
    </div>
    <div class="tab-content">
      <ul>
        <li v-for="tab in tabList" :key="tab.code">
          <div>
            <span v-text="tab.name" />
            <uni-icons class="icon" type="back" size="12"></uni-icons>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-content">
      <scroll-view class="scroll-view" scroll-y :refresher-triggered="isReloading" @refresherrefresh="refresh" @scrolltolower="loadMore">
        <!--refresher-enabled-->
        <view class="empty" v-if="isEmpty">
          <text>暂无数据</text>
        </view>
        <uni-swipe-action v-if="!isEmpty">
          <!-- 使用插槽 （请自行给定插槽内容宽度）-->
          <uni-swipe-action-item v-for="(data, index) in dataList" :key="index">
            <div class="data-item">
              <div class="finish-icon" v-if="index % 3 === 0"><img src="../../static/images/opinions/finish.png" mode="widthFix" /></div>
              <div class="data-content" @click="listItemClick(data)">
                <div class="top">
                  <h2>标题标题标题标题标题标题标题标题标题标题标题</h2>
                  <div class="status" :class="{ wait: index % 3 === 1, doing: index % 3 === 2, hide: index % 3 === 0 }">
                    <p v-if="index % 3 === 1">待回复</p>
                    <p v-if="index % 3 === 2">办理中</p>
                  </div>
                </div>
                <div class="middle">
                  <p><span v-for="i in 100" :key="i">内容</span></p>
                </div>
                <div class="bottom">
                  <div class="classify">
                    <uni-icons class="icon" type="paperclip" size="14" color="#d0d0d0"></uni-icons>
                    <span>投诉/求助,城建</span></div>
                  <div class="classify">
                    <uni-icons class="icon" custom-prefix="iconfont" type="icon-shijian" size="14" color="#d0d0d0"></uni-icons>
                    <span>2024-01-01</span></div>
                  <div class="classify">
                    <uni-icons class="icon" type="person" size="14" color="#d0d0d0"></uni-icons>
                    <span>155****5555</span></div>
                </div>
              </div>
            </div>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </scroll-view>
    </div>
  </div>
</template>

<script>
  import PageHeader from '../../components/common/PageHeader';
  
  export default {
    name: 'OpinionsIndex',
    components: {
      PageHeader,
    },
    props: {},
    data() {
      return {
        isLoading: false,
        isReloading: false,
        isEmpty: false,
        isMore: true,
        dataList: [ 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
        pageData: {
          pageNum: 1,
          pageSize: 20,
        },
        tabList: [
          { name: '区县', code: 'county' },
          { name: '分类', code: 'classify' },
          { name: '筛选', code: 'search' },
        ],
      };
    },
    computed: {},
    watch: {},
    mounted() {
    },
    created() {
    },
    methods: {
      listItemClick(data) {
        this.$pageTo({
          url: '/pages/opinions/detail',
          query: {
            id: 111,
          },
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import "../../components/common/scroll-view";
  
  .index {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #F3F4F6;
    border-bottom: 10px solid white;
    .banner-content {
      img {
        display: block;
        width: 100%;
      }
    }
    .tab-content {
      background-color: white;
      ul {
        font-size: 0;
        li {
          display: inline-block;
          width: calc(100% / 3);
          font-size: 14px;
          text-align: center;
          padding: 15px 0;
          div {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7D7D7D;
            span {
              font-size: 14px;
            }
            .icon {
              transform: rotateZ(-90deg);
              transition: all 0.2s;
              margin-left: 5px;
            }
          }
        }
      }
    }
    .list-content {
      flex: 1;
      overflow: hidden;
      .data-item {
        margin-top: 10px;
        background-color: white;
        position: relative;
        .finish-icon {
          position: absolute;
          top: 5px;
          right: 20px;
          z-index: 10;
          img {
            display: block;
            width: 65px;
          }
        }
        .data-content {
          .top {
            border-bottom: 1px solid #F3F4F6;
            display: flex;
            align-items: center;
            padding: 15px;
            h2 {
              font-size: 16px;
              line-height: 1;
              color: #021930;
              white-space: nowrap;
              text-overflow: ellipsis;
              flex: 1;
              overflow: hidden;
              font-weight: 600;
            }
            .status {
              margin-left: 10px;
              font-size: 12px;
              padding: 5px 10px;
              line-height: 1;
              border: 1px solid blue;
              border-radius: 3px;
              &.wait {
                color: #cecece;
                border-color: #cecece;
              }
              &.doing {
                color: #f8b451;
                border-color: #f8b451;
              }
              &.hide {
                width: 100px;
                visibility: hidden;
              }
            }
          }
          .middle {
            padding: 10px 15px;
            display: block;
            p {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              line-height: 1.5;
              &, span {
                color: #021930;
                font-size: 14px;
                font-weight: 600;
              }
            }
          }
          .bottom {
            display: flex;
            align-items: center;
            padding: 10px 5px;
            > div {
              padding: 0 10px;
              display: flex;
              align-items: center;
              font-size: 12px;
              span {
                color: #d0d0d0;
                font-size: 12px;
                display: block;
                line-height: 1;
                margin-left: 5px;
              }
              .icon {
                display: block;
              }
            }
          }
        }
      }
    }
  }
</style>
